<script>
import { reactive } from "vue";
import Taro from "@tarojs/taro";
import { WebView } from "@tarojs/components";
import { useTzRouter } from "@/vhooks/useTzRouter";

export default {
  name: "WebPage",
  components: { "web-view": WebView },
  setup() {
    const state = reactive({
      src: "",
    });
    const TARO_ENV = process.env.TARO_ENV;
    const { route } = useTzRouter();
    const { url, title } = route.query;

    url && (state.src = url);
    title && Taro.setNavigationBarTitle({ title });
    // TODO: h5 环境下使用 iframe 存在安全策略问题
    return () => {
      return (
        <tz-view class="web-page">
          {TARO_ENV === "h5" ? (
            <iframe src={state.src}></iframe>
          ) : (
            <web-view src={state.src} />
          )}
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.web-page {
}
</style>
